<template>
  <ul class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item,key) of page" :key="key">
        <li class="icons-item" v-for="icon of item" :key="icon.id">
          <img :src="icon.imgUrl" :alt="icon.title" />
          <p>{{ icon.title }}</p>
        </li>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </ul>
</template>
<script type="text/ecmascript-6">
    export default {
      props:{
        iconsList:Array
      },
      data(){
        return{
          swiperOption:{
            pagination: {
              el: '.swiper-pagination'
            },
            loop:true
          },

        }
      },
      computed:{
        page(){// 把一维数组变成二维数组
          let pages = [];
          this.iconsList.forEach((item,index)=>{
            let idx = Math.floor(index / 8);
            if(!pages[idx])pages[idx] = [];
            pages[idx].push(item);
          });
          return pages;
        }
      }
    }
</script>
<style lang="stylus" rel="text/stylus" scoped>
  @import "~css/common.styl"
  .icons
    width: 100%
    background-color: #fff
    overflow: hidden
    .icons-item
      width: 25%
      text-align: center
      padding-top: .2rem
      font-size: .28rem
      float: left
      img
        width: 1.1rem
        height:1.1rem
      p
        $txtOverflow()
    .swiper-container {
      height: 200px;
    }
    >>> .swiper-pagination-bullet
      width: 6px
      height: 6px
      background-color: rgba(144,144,144,0.8)
      opacity: 0.5
    >>> .swiper-pagination-bullet-active /* 样式穿透 */
      opacity: 1
      background: rgba(0,175,190,.8)
</style>
